<template xmlns="">
  <div class="app-container">
    <el-table ref="multipleTable"
              :data="tableData.filter(data => !search || data.tableName.toLowerCase().includes(search.toLowerCase()))"
              :default-sort="{prop: 'createTime', order: 'descending'}" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="auto">
      </el-table-column>
      <el-table-column label="表名称" width="auto" sortable>
        <template slot-scope="scope">{{ scope.row.tableName }}</template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="auto" sortable>
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column prop="engine" label="engine" width="auto" sortable>
        <template slot-scope="scope">{{ scope.row.engine }}</template>
      </el-table-column>
      <el-table-column prop="tableComment" label="表描述" show-overflow-tooltip sortable>
        <template slot-scope="scope">{{ scope.row.tableComment }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handlePreview(scope.$index, scope.row)">预览</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">生成</el-button>
          <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <!-- 预览界面 -->
    <el-dialog :visible.sync="preview.open" fullscreen :close-on-click-modal="false" @opened="openDialog"
               class="customForm1" style="text-align: left">
      <div slot="title">
        <span><i class="el-icon-view"></i></span>
        <span> {{ preview.title }}</span>
      </div>
      <div class="gencode-body"></div>
      <el-tabs v-model="preview.activeName">
        <el-tab-pane
          v-for="(value, key) in preview.data"
          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
          :key="key"
        >
          <pre class="gencodeClass">{{ value }}</pre>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import $ from "jquery";

export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      search: '',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      // 预览参数
      preview: {
        open: false,
        title: "代码预览",
        data: {},
        activeName: "domain.java"
      }
    }
  },
  created() {
    let self = this
    self.getListTable()
  },
  methods: {
    async getListTable() {
      let self = this
      this.tableData = await self.$service.generator.listTable();
      this.success()
    },
    //预览按钮
    async handlePreview(row) {
      let self = this
      let response = await self.$service.generator.previewTable({tableId: 1})
      this.preview.data = response.data;
      this.preview.open = true;
    },
    openDialog() {
      $('.gencode-body').parent().css('height', $(window).innerHeight() - 50).css('top', 0).css('overflow-y', 'hidden');
      $('.gencodeClass').css('height', $(window).innerHeight() - 140).css('overflow-y', 'auto');
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    success(massage) {
      this.$notify({
        title: '操作成功',
        message: massage,
        type: 'success',
        position: 'bottom-right'
      });
    },
    error(massage) {
      this.$notify({
        title: '操作失败',
        message: massage,
        type: 'error',
        position: 'bottom-right'
      });
    }
  }
};
</script>
